import {CnBoldP, CnMediumP, CnNormalP} from '@/components/text'
import PmLogTimeLine from '@/components/timeLine/pmLog'
import PhoneLayout from '@/layout/index_phone'
import deepClone from '@/libs/deepClone'
import {computed, defineComponent, PropType} from 'vue'
import PhoneProcess from './components/phoneProcess'
import {PhoneBtnsByProgressStep} from './components/phone_btnsByProgressStep'
import PhoneDimenBlock from './components/phone_dimen_block'
import PhoneTargetBlock from './components/phone_target_block'

const PhomePmBaseInfo = defineComponent({
  props: {
    /** 当前绩效所属人员 */
    owner: {
      type: Object as PropType<User.Info>,
      required: true
    },
    pmProgress: {
      type: Array as PropType<MyPm.PmProgress[]>,
      required: true
    },
    pmData: {
      type: Array as PropType<MyPm.TableData[]>,
      required: true
    },
    groupId: {
      type: Number,
      required: true
    },
    nowRunningByLoginuser: {
      type: Object as PropType<MyPm.PmProgress>
    },
    nowRunningProgress: {
      type: Array as PropType<MyPm.PmProgress[]>
    },
    ownerPm: {
      type: Object as PropType<MyPm.Pm>,
      required: true
    }
  },
  emits: {
    rejectProgress: (): boolean => true,
    targetConfirm: (): boolean => true,
    leaderTargetConfirm: (): boolean => true,
    managerRebut: (): boolean => true,
    pmTurnover: (): boolean => true
  },
  setup(props, {emit}) {
    const pmDatas = computed(() => {
      let pmData_clone = deepClone(props.pmData) as typeof props.pmData
      let dimenIds = Array.from(new Set(pmData_clone.map(item => item.pmDimensionId)))
      let returnData = dimenIds.map(
        dimenId => pmData_clone.filter(item => item.pmDimensionId === dimenId) as MyPm.TableData[]
      )
      return returnData
    })
    return () => (
      <PhoneLayout>
        <div class='flex-1 flex flex-col overflow-hidden'>
          {/* 用户信息 */}
          <div class='w-full h-80 bg-white flex items-center gap-x-8 px-16'>
            <img src={props.owner.avatar} class='w-40 h-40 rounded-4'></img>
            <div>
              <CnBoldP>{props.owner.userName}</CnBoldP>
              <CnNormalP>{props.owner.deptName || '暂无部门信息'}</CnNormalP>
            </div>
          </div>
          {/* 步骤 */}
          <PhoneProcess class='w-full' pmProgress={props.pmProgress}></PhoneProcess>
          {/* 绩效内容 */}
          <div class='flex-1 overflow-y-auto flex flex-col gap-y-12 pb-16'>
            {pmDatas.value.map(dimen => (
              <PhoneDimenBlock dimen={dimen}>
                <div class='flex flex-col gap-y-12 mt-12'>
                  {dimen.map(target => (
                    <PhoneTargetBlock target={target}></PhoneTargetBlock>
                  ))}
                </div>
              </PhoneDimenBlock>
            ))}

            <div class='px-12 pb-16'>
              {props.ownerPm.pmId ? (
                <PmLogTimeLine pmId={props.ownerPm.pmId}></PmLogTimeLine>
              ) : null}
            </div>
          </div>
          {/* 底部按钮 */}
          <div class='h-60 bg-white border-t-1 border-cardLine flex items-center justify-center z gap-x-12 px-16 overflow-x-auto'>
            <PhoneBtnsByProgressStep
              owner={props.owner}
              ownerPm={props.ownerPm}
              nowRunningByLoginuser={props.nowRunningByLoginuser}
              nowRunningProgress={props.nowRunningProgress}
              groupId={props.groupId}
              onRejectProgress={() => {
                emit('rejectProgress')
              }}
              onTargetConfirm={() => {
                emit('targetConfirm')
              }}
              onLeaderTargetConfirm={() => {
                emit('leaderTargetConfirm')
              }}
              onManagerRebut={() => {
                emit('managerRebut')
              }}
              onPmTurnover={() => {
                emit('pmTurnover')
              }}
            ></PhoneBtnsByProgressStep>
          </div>
        </div>
      </PhoneLayout>
    )
  }
})

export default PhomePmBaseInfo
